<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <script src="./lib/config.js"></script>
    <script src="../dist/zrender.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div id="main" style="width:1000px;height:800px;"></div>
    <script type="text/javascript">
    // 初始化zrender
    var zr = zrender.init(document.getElementById('main'), {
        renderer: window.__ZRENDER__DEFAULT__RENDERER__ || 'svg'
    });

    var rect = new zrender.Rect({
        shape: {
            x: 10,
            y: 10,
            width: 80,
            height: 80
        },
        style: {
            fill: 'red'
        }
    });
    rect.__metaData = {
        type: 'seriesItem',
        seriesIndex: 0,
        dataIndex: 0,
        styleType: 'itemStyle'
    }
    zr.add(rect);

    setTimeout(() => {
        const metaData = {
            series: [{
                normal: {
                    itemStyle: {
                        fill: 'red'
                    }
                },
                emphasis: {
                    itemStyle: {
                        fill: 'blue'
                    }
                }
            }]
        }

        const svg = zr.painter.getViewportRoot().getElementsByTagName('svg')[0];
        const root = svg.children[0];
        for (let i = 0; i < root.children.length; i++) {
            const child = root.children[i];
            const type = child.getAttribute('ecmeta_type');
            if (type === 'seriesItem') {
                child.addEventListener('mouseover', event => {
                    const attrs = event.target.attributes;
                    const seriesIndex = attrs.ecmeta_seriesindex.value;
                    const dataIndex = attrs.ecmeta_dataindex.value;
                    const styleType = attrs.ecmeta_styletype.value;
                    const emphasis = metaData.series[seriesIndex].emphasis;
                    if (emphasis && emphasis[styleType]) {
                        const style = emphasis[styleType];
                        for (let key in style) {
                            attrs[key].value = style[key];
                        }
                    }
                });
                child.addEventListener('mouseout', event => {
                    const attrs = event.target.attributes;
                    const seriesIndex = attrs.ecmeta_seriesindex.value;
                    const dataIndex = attrs.ecmeta_dataindex.value;
                    const styleType = attrs.ecmeta_styletype.value;
                    const normal = metaData.series[seriesIndex].normal;
                    if (normal && normal[styleType]) {
                        const style = normal[styleType];
                        for (let key in style) {
                            attrs[key].value = style[key];
                        }
                    }
                });
            }
        }
    }, 100);
    </script>

</body>
</html>